<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>酒店管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery-3.3.1.js"></script>

</head>
<body>

<div id="changInfo" style="display: none; padding: 5px">
    <form class="layui-form" action="" onsubmit="false" id="change" lay-filter="roomInfo" >
        <div class="layui-form-item">
            <label class="layui-form-label">房间ID</label>
            <div class="layui-input-block">
                <input type="text" name="c" lay-verify="title" autocomplete="off" readonly="readonly"
                       class="layui-input">
            </div>
            <label class="layui-form-label">房间名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">验证必填项</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">范围</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <label>单行选择框</label>
        <select>
            <option value=""></option>
            <option value="0">写作</option>
            <option value="1">阅读</option>
            <option value="2">游戏</option>
            <option value="3">音乐</option>
            <option value="4">旅行</option>
        </select>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">搜索选择框</label>
                <div class="layui-input-inline">
                    <div class="layui-form">
                        <select name="modules" id="sel" lay-verify="required" lay-search="">

                        </select>
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读">
                <input type="checkbox" name="like[game]" title="游戏">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-upload" style="height: auto">
                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
                <!--<button type="button" class="layui-btn" id="testListAction">开始上传</button>-->
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="changeSubmit">立即提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </form>

    <script>
        layui.use(['form', 'upload'], function () {
            var form = layui.form
                , $ = layui.jquery
                , upload = layui.upload
                , files = null;
            form.render();

            //多文件列表示例
            var
                demoListView = $('#demoList')
                , uploadListIns = upload.render({
                    elem: '#testList'
                    , url: '/upload/'
                    , accept: 'images'
                    , exts: 'jpg|png|jpeg|gif|bmp'
                    , multiple: true
                    , auto: false
                    , method: 'post'
                    , size: 800      //允许上传大小，单位kb
                    // , bindAction: '#testListAction'  //上传摁钮监听
                    , choose: function (obj) {
                        files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        //读取本地文件
                        obj.preview(function (index, file, result) {
                            var tr = $(['<tr id="upload-' + index + '">'
                                , '<td>' + '<img src="' + result + '" style="width: 80px;height: 80px" alt="' + file.name + '" class="layui-upload-img">' + file.name + '</td>'
                                , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                                , '<td>等待上传</td>'
                                , '<td>'
                                , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                , '</td>'
                                , '</tr>'].join(''));

                            //单个重传
                            tr.find('.demo-reload').on('click', function () {
                                obj.upload(index, file);
                            });

                            //删除
                            tr.find('.demo-delete').on('click', function () {
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            });

                            demoListView.append(tr);
                        });
                    }
                    , done: function (res, index, upload) {
                        if (res.code == 0) { //上传成功
                            var tr = demoListView.find('tr#upload-' + index)
                                , tds = tr.children();
                            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                            tds.eq(3).html(''); //清空操作
                            return delete this.files[index]; //删除文件队列已经上传成功的文件
                        }
                        this.error(index, upload);
                    }
                    , error: function (index, upload) {
                        var tr = demoListView.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                });

            form.on('submit(changeSubmit)', function (data) {
                var myForm = document.getElementById("changeForm");
                var formData = new FormData(myForm);
                //循环 files(存入多图片choose回调中储存的对象)  逐条插入到formData
                for (var i in files) {
                    formData.append("files", files[i]);//此处的files为上传接口参数名
                }
                $.ajax({
                    url: '/room/updateOneAll',
                    type: 'post',
                    data: formData,
                    async: false,
                    contentType: false,   //ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
                    processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                    success: function (info) {
                        layer.msg('添加成功', {
                            time: 1200, //1.2s后自动关闭
                        });
                        layer.closeAll();
                        window.parent.location.reload();// 重新渲染页面
                    },
                    error: function (request) {
                        parent.layer.alert("网络超时");
                    },
                });
                return false;
            })
        });
    </script>
</div>


<table class="layui-table" id="hotel"
       lay-data="{url: '/hotel/allHotelInfo', even: true,page:true, id:'hotel',limits: [1, 5, 10, 20],limit: 1}"
       lay-filter="hoteltable">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox', fixed: 'left',hide:'true'}"></th>
        <th lay-data="{field: 'hotelid', width: 80, sort: true}">ID</th>
        <th lay-data="{field: 'hotelname',  width: 120}">酒店名称</th>
        <th lay-data="{field: 'hoteladdr', minWidth: 150}">酒店地址</th>
        <th lay-data="{field: 'performance', minWidth: 160}">酒店业绩</th>
        <th lay-data="{field: 'star',  width: 80, sort: true}">评价</th>
        <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#demo',hide:'true'}"></th>
    </tr>
    </thead>
</table>


<script type="text/html" id="demo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
        <!--<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>-->
    </div>
</script>

<script>
    layui.use(['table', 'layer'], function () {
        var table = layui.table,
            layer = layui.layer;

        //监听行事件
        table.on('tool(hoteltable)', function (obj) {
            var data = obj.data,
                layEvent = obj.event;
            alert(data.hotelid);
            alertChange(data);
            /*if (layEvent === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(obj); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    alert(data.hotelid);
                    deleteRow(obj.hotelid);
                });
            } else if (layEvent === 'edit') {
                alert(data.hotelid);
            }*/
        });

        function alertChange(data) {

            layer.open({
                type: 1
                , area: ["600px", "700px"]
                , content: $("#changInfo")
                , success: function (layero, index) {
                    layui.use('form', function () {
                        var form = layui.form;
                        form.render();
                        form.val('roomInfo', {   //lay-filter,数据数组
                            "c": data.hotelid // "name": "value"
                        });
                    });
                }
            })
        }

    });
</script>


</body>
</html>